<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../reset.css">
    <style>
        a {
            text-decoration: none;

        }

        .news-wrapper {
            width: 300px;
            height: 358px;
            margin: 50px auto;
            border-top: #666666 solid 1px;
        }

        .title {
            /*边框与文字宽度一致*/
            display: inline-block;
            height: 30px;
            /*line-height: 40px;*/
            border-top: red solid 1px;

            /*上移动一个px*/
            margin-top: -1px;
            padding-top: 10px;
        }

        .title > a {
            color: #111111;
            font-weight: bold;
        }

        .news-img {
            height: 150px;
        }

        .news-img img {
            width: 300px;
            height: 150px;
        }

        .news-img h3 {
            color: #FeFeFe;
            margin-top: -30px;
            font-weight: bold;

            padding-left: 30px;
        }

        .news-list {
            margin-top: 20px;
            padding-left: 15px;

            list-style: square;
        }

        .news-list li {
            margin-bottom: 16px;
        }

        .news-list li a {
            font-size: 14px;
            color: #666666;
        }

        .news-list a:hover{
            color: red;
        }
    </style>
</head>
<body>
<div class="news-wrapper">
    <h2 class="title"><a href="">体育</a></h2>
    <div class="news-img">
        <a href="#">
            <img src="./img/jd1.png" alt="">
            <h3>电饭 锅电饭锅的</h3>
        </a>
    </div>

    <ul class="news-list">
        <li><a href="#">哈哈：我爱打球</a></li>
        <li><a href="#">哈哈：我爱打球</a></li>
        <li><a href="#">哈哈：我爱打球</a></li>
        <li><a href="#">哈哈：我爱打球</a></li>
    </ul>
</div>
</body>
</html>